<template>
	<Container>
		<view class="header">
			<view
				v-for="(item, index) in assignment.optionArticles"
				:key="index"
				:class="{ error: chooses[index] === 'error', articleLight: chooses[index] === 'success' }"
				hover-class="touch"
				hover-stay-time="100"
			>
				<image class="image img" :src="item.imageUrl" mode="aspectFit" @tap="tap(item, index)"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	data() {
		return {
			isStart: false
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	watch: {
		questionPress: function(bool) {
			if (!bool && !this.isStart) {
				this.comparedPlay()
			}
		}
	},
	methods: {
		comparedPlay: async function() {
			this.dialogueAudio({
				src: this.assignment.comparedArticle.backgroundAudioUrl,
				speaker: this.assignment.comparedArticle.speaker,
				start: () => {
					this.questionPress = true
					this.isStart = true
					const timer = setTimeout(async () => {
						const data = await this.parseTextAudio({
							text: this.assignment.comparedArticle.audioText
						})
						this.narratorAudio({
							src: data
						})
					}, this.assignment.comparedArticle.audioDelayMs)
				},
				end: async () => {
					this.questionPress = false
				}
			})
		},
		tap: function(item, index) {
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	max-width 65vh
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	display flex
	align-items center
	justify-content center
	flex-direction column
	position relative
	margin 3vh 0
	view
		width 100%
		height 50%
		display flex
		align-items center
		justify-content center
		position relative
		transition all 0.3s
		.image
			width 80%
			height 80%
	.comparedArticle
		margin-top 40rpx
		width 60%
		height 60%
		filter drop-shadow(0 0 10rpx #FDD065)
</style>
